<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
</head>
<body>
    <!-- 路由的传参
        1.利用touter-link 传参
        通过方法切换路由之后，地址栏上是 http://127.0.0:5500/vue_router3.html#/news/001
        获取这个参数：$route.params.id获取
    -->
    <div id="box">
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
        <router-view></router-view>
    </div>

    <template id="home">
        <!-- 组件只能由一个根元素，所以要显示的内容要包装到div中 -->
        <div >
            <h1>首页</h1>
            <router-link to="/home/login">登录</router-link>
            <router-link to="/home/reg">注册</router-link>
            <router-view></router-view>
      </div>
    </template>

    <template id='news'>
        <div>
            <h1>新闻列表</h1>
            <ul>
                <li><router-link to="news/001">新闻001</router-link></li>
                <li><router-link to="news/002">新闻002</router-link></li>
            </ul>
        </div>
    </template>

    <template id="reg">
        <div>
            注册页面
        </div>
    </template>

    <template id="login">
        <div>
            登录页面
        </div>
    </template>

    <template id="NewsDetail">
        <div>
            新闻的详细页面
            <span>{{$route.params.id}}</span>
        </div>
    </template>

<!-- 创建组件 -->
    <script>
        // 定义路由的组件
        const Home = {template:'#home'}
        const News = {template:'#news'}
        const Login = {template:'#login'}
        const Reg = {template:'#reg'}
        const NewsDetail = {template:'#NewsDetail'}
   //定义路由
   const routes = [
            {path:'/',redirect:'/home'},
            {
                path:'/home',
                component:Home,
                children:[
                    {path:'/home/login',component:Login},
                    {path:'/home/reg',component:Reg}
                ]
            },
            {path:'/news',component:News},
            {path:'/news/:id',component:NewsDetail}
        ]

        //创建vueRouter的实例
        const router = new VueRouter({
            routes
        })

        //创建vue的实例
        var vm = new Vue({
            el:'#box',
            data:{},
            router
        })
    </script>

    

    </body>
    </html>